<style lang=sass>
@import "../../assets/sass/message/message.scss";
</style>

<template>
	<div class="vue-message vue-message-center" v-bind:class="className"  :transition="transition" v-show="visible">
    <div class="vue-message-header">{{{title}}}</div>
    <div class="vue-message-body">{{{content}}}</div>
    <div class="vue-message-footer">
    <div v-for="btn in buttons" class="vue-message-btn" @click="btn.callback">{{btn.text}}</div>
    </div>
  </div>
  <Mask v-show="visible"></Mask>
</template>


<script>
import Mask from "../mask/mask"

export default {
  props:{//继承父级组件参数
    title:String,
    content:String,
    className:String,
    buttons:Array,
    transition:String,
    onOk:Function,
    onCancel:Function,
    visible:Boolean
  },
  compiled(){
    var self=this;
    if(self.buttons === undefined){
        self.buttons=[
			//默认确定按钮，不配置buttons参数时
			{
				"text":"确定",
				"callback":function(ev){
					self.onOk(ev);
				}
			},{
				"text":"取消",
				"callback":function(ev){
					self.onCancel(ev);
				}
			}
		];
    }
    self.visiable=false;
  },
  data:function(){
    return{
      
    };
  },
  components:{
    Mask//依赖组件Mask
  }
}
</script>


